<template>
	<view class='editAdd' >
		<sidebar class='header'></sidebar>
		<view class='content' style="padding-bottom: 100px;">
			<view class='part'>
				<view class='partTit'>{{$t('editAddress.partTit1')}}</view>
				<view class='partContent' >
					<view class='partLine'>
						<view class='lineTit'>{{$t('editAddress.lineTit1')}}</view>
						<view class='lineVal dFlex jBetween_aCenter'>
							<input type="text" v-model='addInfo.area' 
								:placeholder='$t("editAddress.placeholder1")'>
							<u-icon name="map" size="30"@click='openMap'></u-icon>
						</view>
					</view>
					<view class='partLine'>
						<view class='lineTit'>{{$t('editAddress.lineTit2')}}</view>
						<view class='lineVal dFlex jBetween_aCenter'>
							<input type="text" v-model='addInfo.address' :placeholder='$t("editAddress.placeholder1")'>
						</view>
					</view>
				</view>
			</view>
			<view class='part'>
				<view class='partTit'>{{$t('editAddress.partTit2')}}</view>
				<view class='partContent'>
					<view class='partLine'>
						<view class='lineTit'>{{$t('editAddress.lineTit3')}}</view>
						<view class='lineVal dFlex jBetween_aCenter'>
							<input type="text" v-model='addInfo.last_name'
								:placeholder='$t("editAddress.placeholder2")'>
						</view>
					</view>
					<view class='partLine'>
						<view class='lineTit'>{{$t('editAddress.lineTit4')}}</view>
						<view class='lineVal'>
							<input type="text" v-model='addInfo.first_name'
								:placeholder='$t("editAddress.placeholder3")'>
						</view>
					</view>
					<view class='partLine'>
						<view class='lineTit'>{{$t('editAddress.lineTit5')}}</view>
						<view class='lineVal'>
							<input type="number" v-model='addInfo.mobile' :placeholder='$t("editAddress.placeholder4")'>
						</view>
					</view>
					<view class='partLine'>
						<view class='lineTit'>{{$t('editAddress.lineTit6')}}</view>
						<view class='lineVal'>
							<input type="text" v-model='addInfo.company' :placeholder='$t("editAddress.placeholder6")'>
						</view>
					</view>
					<view class='partLine'>
						<view class='lineTit'>{{$t('editAddress.lineTit7')}}</view>
						<view class='lineVal'>
							<input type="text" v-model='addInfo.vat_no' :placeholder='$t("editAddress.placeholder7")'>
						</view>
					</view>
				</view>
			</view>
			<view class='line dFlex jBetween_aCenter'>
				<text>{{$t('editAddress.set')}}</text>
				<u-switch v-model="addInfo.is_default" :activeValue='1' :inactiveValue='0' activeColor='#f8e801'
					style="transform: scale(0.8);"></u-switch>
			</view>
			<!-- <view class='tag'>
				<view class="u-page__tag-item" >
					<u-tag @click='chooseTag(1)' color='addInfo.type == "1" ? "#ffffff" : "#909399"' borderColor='addInfo.type == "1" ? "$main" : "#909399"' :bgColor='addInfo.type == "1" ? "$main" : ""' text="家庭" :plain="addInfo.type != '1'" type="info" name="1"></u-tag>
				</view> 
				<view class="u-page__tag-item" >
					<u-tag @click='chooseTag(2)' color='addInfo.type == "2" ? "#ffffff" : "#909399"' borderColor='addInfo.type == "2" ? "$main" : "#909399"' :bgColor='addInfo.type == "2" ? "$main" : ""' text="工作" :plain="addInfo.type != '2'" type="info" name="2"></u-tag>
				</view>
			</view> -->
		</view>
		<view class='btns'>
			<view class='saveBtn'  style="color:#000" @click='saveAddInfo'>{{$t('editAddress.save')}}</view>
		</view>
	</view>
</template>

<script>
	import sidebar from '@/components/sidebar.vue'
	export default {
		components: {
			sidebar
		},
		data() {
			return {
				mapHeight: '',
				addInfo: {
					id: '',
					address: '',
					area: '',
					mobile: '',
					is_default: 0,
					longitude: '',
					latitude: '',
					first_name: '',
					last_name: '',
					company: '',
					vat_no: '',
					type: '',
				},
				cid: '',
				cart_ids: ''
			};
		},
		onLoad(e) {
			this.cid = e.cid ?? ''
			this.cart_ids = e.cart_ids ?? ''
			if (e.content) {
				this.addInfo.area = decodeURIComponent(e.content || e.address);
				this.addInfo.address = decodeURIComponent(e.address);
				this.addInfo.latitude = e.lat;
				this.addInfo.longitude = e.lng;
			}
			if (e.addInfo) {
				var addInfo = JSON.parse(e.addInfo);
				this.addInfo = {
					id: addInfo.address_id,
					address: addInfo.address,
					area: addInfo.area,
					company: addInfo.company,
					vat_no: addInfo.vat_no,
					mobile: addInfo.mobile,
					is_default: addInfo.is_default,
					longitude: addInfo.longitude,
					latitude: addInfo.latitude,
					first_name: addInfo.first_name,
					last_name: addInfo.last_name,
					type: addInfo.type ? addInfo.type : '',
				}
			}
		},
		onShow() {
			this.getPosition();
			uni.setNavigationBarTitle({
				title: this.$t('pages.editAdd'),
			})
			uni.createSelectorQuery().selectAll('.header').boundingClientRect(data => {
				this.mapHeight = uni.getSystemInfoSync().windowHeight - data[0].height;
			}).exec()
		},
		methods: {
			// 选择标签
			chooseTag(type) {
				console.log(type);
				this.addInfo.type = type;
			},
			// 保存地址信息
			async saveAddInfo() {
				if (!this.addInfo.area || !this.addInfo.address) {
					uni.showToast({
						title: this.$t('editAddress.toast1'),
						icon: "none"
					})
					return;
				}
				if (!this.addInfo.first_name || !this.addInfo.last_name) {
					uni.showToast({
						title: this.$t('editAddress.toast2'),
						icon: "none"
					})
					return;
				}
				if (!this.addInfo.mobile) {
					uni.showToast({
						title: this.$t('editAddress.toast3'),
						icon: "none"
					})
					return;
				}
				var result = null;
				if (this.addInfo.id) {
					result = await this.$api('/user/edit_address', this.addInfo);
				} else {
					delete this.addInfo.id;
					result = await this.$api('/user/add_address', this.addInfo);
				}
				console.log(result);
				if (result) {
					uni.showToast({
						title: this.$t('editAddress.toast4'),
						icon: "success"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: './address?cart_ids=' + this.cart_ids + '&cid=' + this.cid
						})
					}, 1650)
				}
			},
			// 打开地图
			openMap() {
				// uni.navigateTo({
				// 	// url:"./map?content="+this.content,
				// 	url: "./map?area=" + this.addInfo.area + "&id=" + (this.addInfo.id ? this.addInfo.id : '') +
				// 		"&lat=" + this.addInfo.latitude + '&lng=' + this.addInfo.longitude,
				// })
				const _this = this
				uni.chooseLocation({
					latitude: _this.lat,
					longitude: _this.lng,
					success(res) {
						console.log('map', res)
						const addressInfo = res.address.split(',')
						const address = addressInfo[0]
						let content = addressInfo[1]
						if (addressInfo[2]) {
							content += addressInfo[2]
						}
						if (addressInfo[3]) {
							content += addressInfo[3]
						}

						_this.addInfo.latitude = res.latitude
						_this.addInfo.longitude = res.longitude
						_this.addInfo.area = content || address
						_this.addInfo.address = address
					}
				})
			},
			getPosition() {
				uni.getLocation({
					type: 'wgs84',
					altitude: true,
					geocode: false,
					success: (location) => {
						if (!this.id) {
							console.log('经纬度', location);
							this.lat = Number(location.latitude);
							this.lng = Number(location.longitude);
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.btns {
		.saveBtn {
			width: 100%;
			background: $main;
			color: white;
			text-align: center;
			border-radius: 4px;
			padding: 10px 0;
		}

		width: 100%;
		padding: 12px;
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing:border-box;
	}

	.content {
		.tag {
			.u-page__tag-item {
				width: 50px;
				display: inline-block;
				margin-right: 12px;
			}

			width: 100%;
			padding: 12px;
			box-sizing: border-box;
		}

		.line {
			width: 100%;
			padding: 12px;
			box-sizing: border-box;
			background: white;
			border-radius: 4px;
		}

		.part {
			.partContent {
				.partLine {
					.lineTit {
						font-size: 12px;
						color: #999999;
						padding: 8px 0;
					}

					width: 100%;
					padding: 5px 0 10px;
					border-bottom:1px solid rgba(0, 0, 0, 0.1)
				}

				.partLine:last-child {
					border: none;
				}

				width: 100%;
			}

			.partTit {
				width: 100%;
				font-size: 15px;
				font-weight: bold;
			}

			width: 100%;
			padding: 12px 12px 0;
			box-sizing: border-box;
			background: white;
			border-radius: 4px;
			margin-bottom: 12px;
		}

		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	::v-deep.u-switch {
		transform: scale(0.8) !important;
	}
</style>